<template>
  <main-content back title="流程详情" class="main-content">
    <div class="page-content-padding info-summary">
      <div class="name">{{ processDetail.canvas.name }}</div>
      <div class="property">
        <span> {{ startType }} </span>
        <span v-if="processDetail.canvas.startType === 1">
          {{ publishTime }}
        </span>
        <span v-if="processDetail.canvas.startType === 3">
          {{ publishTime }} 至 {{ invalidTime }} 期间内
        </span>
        <span v-if="processDetail.canvas.startType === 3">
          ，每{{ cycleType }}{{ cycleValue }}
        </span>
        <span>执行</span>
      </div>
      <div class="owner">
        由
        {{ processDetail.canvas.createdUserName || '--' }}
        <span v-if="isShowCreateTime">创建于</span><span v-else>发布于</span>
        <span v-if="isShowCreateTime">{{ createTime }}</span><span v-else>{{ publishTime }}</span>
      </div>
    </div>

    <div class="page-content-padding tab-wrapper">
      <el-tabs v-model="activeName">
        <el-tab-pane label="数据详情" name="statsGraph"/>
        <el-tab-pane label="画布配置" name="readOnlyGraph"/>
      </el-tabs>
    </div>

    <template v-if="activeName==='statsGraph'">
      <div class="chart-wrapper graph-block">
        <div class="title">整体概览</div>
        <overview-bar-chart :enter-count="enterCount" :reach-count="reachCount"/>
      </div>
      <div class="graph-wrapper graph-block">
        <div class="title">分布详情</div>
        <work-table-stats :process-detail="processDetail" @node-click="handleNodeClick"/>
      </div>
    </template>

    <template v-if="activeName==='readOnlyGraph'">
      <div class="graph-wrapper graph-block">
        <work-table-read-only :process-detail="processDetail"/>
      </div>
    </template>

    <el-drawer v-model:model-value="isShowNodeDataDrawer" :title="currentNodeData.name" :size="1000">
      <process-detail-drawer
          :line-chart-data="lineChartData"
          :node-data="currentNodeData"
          :table-info="tableInfo"
          :table-data="tableData"
          @page-change="handlePageChange"
          @size-change="handleSizeChange"
          @export="handleExport"
      />
    </el-drawer>
  </main-content>
</template>

<script>
import moment from "moment";
import {defineAsyncComponent} from 'vue'
import AsyncComponentLoading from "@/components/AsyncComponentLoading.vue"

const WorkTableStats = defineAsyncComponent({
  loader: () => import('@/views/workTable/workTableStats.vue'),
  loadingComponent: AsyncComponentLoading,
  delay: 0,
})
const WorkTableReadOnly = defineAsyncComponent({
  loader: ()=>import('@/views/workTable/workTableReadOnly.vue'),
  loadingComponent: AsyncComponentLoading,
  delay: 0,
})
const OverviewBarChart = defineAsyncComponent({
  loader: () => import('./component/overviewBarChart.vue'),
  loadingComponent: AsyncComponentLoading,
  delay: 0,
})
const ProcessDetailDrawer = defineAsyncComponent({
  loader: () => import("./component/processDetailDrawer.vue"),
  loadingComponent: AsyncComponentLoading,
  delay: 0
})
// import WorkTableStats from "@/views/workTable/workTableStats.vue";
// import WorkTableReadOnly from "@/views/workTable/workTableReadOnly.vue";
// import OverviewBarChart from "./component/overviewBarChart.vue";
// import ProcessDetailDrawer from "./component/processDetailDrawer.vue";

import CanvasApi from "@/api/canvasApi.js";
import CustomerApi from "@/api/customerApi.js";
import {CanvasCreateModel} from "@/views/workTable/dataModel/canvasCreate.js";

export default {
  components: {
    ProcessDetailDrawer,
    WorkTableStats,
    WorkTableReadOnly,
    OverviewBarChart
  },
  data() {
    return {
      activeName: 'statsGraph',
      processDetail: {
        canvas: {},
        nodes: [],
        edges: [],
        events: [],
      },
      isShowNodeDataDrawer: false,
      currentNodeData: {},
      lineChartData: {},
      tableData: [],
      tableInfo: {
        total: 0,
        showCount: 10, // 页面大小
        currentPage: 1 // 起始页为1
      }
    }
  },

  computed: {
    canvasInfo() {
      return this.processDetail.canvas
    },

    createTime() {
      if (!this.canvasInfo.createTime) {
        return '----'
      }

      return moment(this.canvasInfo.createTime).format('YYYY-MM-DD HH:mm:ss')
    },

    publishTime() {
      if (!this.canvasInfo.publishTime) {
        return '----'
      }
      return moment(this.canvasInfo.publishTime).format('YYYY-MM-DD HH:mm:ss')
    },

    invalidTime() {
      if (!this.canvasInfo.invalidTime) {
        return '----'
      }
      return moment(this.canvasInfo.invalidTime).format('YYYY-MM-DD HH:mm:ss')
    },

    startType() {
      if (!this.canvasInfo.startType) {
        return ''
      }

      const _startTypeMap = new Map()
      _startTypeMap.set(1, '单次执行')
      _startTypeMap.set(2, '延迟执行')
      _startTypeMap.set(3, '周期执行')

      return _startTypeMap.get(this.canvasInfo.startType)
    },

    cycleType() {
      if (!this.canvasInfo.cycleType) {
        return ''
      }

      const _cycleType = new Map()
      _cycleType.set(1, '年')
      _cycleType.set(2, '月')
      _cycleType.set(3, '日')
      _cycleType.set(4, '时')
      _cycleType.set(5, '分')
      _cycleType.set(6, '秒')
      _cycleType.set(7, '周')

      return _cycleType.get(this.canvasInfo.cycleType)
    },

    cycleValue() {
      if (this.canvasInfo.cycleType === 7) { // 周
        return ['', '一', '二', '三', '四', '五', '六', '日'][this.canvasInfo.cycleValue]
      }

      if (this.canvasInfo.cycleType === 2) { // 月
        return this.canvasInfo.cycleValue + '号'
      }

      if (this.canvasInfo.cycleType === 3) { // 日
        return this.canvasInfo.cycleDayTime
      }

      return ''
    },

    cycleDayTime() {
      return this.canvasInfo.cycleDayTime
    },

    enterCount() {
      return this.canvasInfo.enterCount || 0
    },

    reachCount() {
      return this.canvasInfo.reachCount || 0
    },

    isShowCreateTime() {
      const _canvasData = this.processDetail.canvas
      return _canvasData.status !== 2 && _canvasData.status !== -1 && _canvasData.status !== -2
    }
  },

  mounted() {
    this.getProcessDetail()
  },

  methods: {
    async getProcessDetail() {
      const {id} = this.$route.query;

      const rs = await CanvasApi.canvasGetInfo({id});
      if (rs && rs.code !== 200) {
        this.$message.error("加载画布信息失败");
        return;
      }

      this.processDetail = new CanvasCreateModel({graph: this.graph}).transferDataToPage(rs.payload);
      // console.log(this.processDetail)
    },

    handleNodeClick(e) {
      this.currentNodeData = e.cell.getData()
      this.isShowNodeDataDrawer = true
      this.getLineChartData()
      this.getTableData()
    },

    async getLineChartData() {
      const rs = await CustomerApi.getDataByNodeId({
        canvasId: this.processDetail.canvas.id,
        merchantId: this.processDetail.canvas.merchantId,
        nodeId: this.currentNodeData.dialogData.id,
      })

      if (rs.code === 200) {
        this.lineChartData = rs.payload
      }
    },

    async getTableData() {
      const rs = await CustomerApi.getDataByNodeIdWithPage({
        canvasId: this.processDetail.canvas.id,
        merchantId: this.processDetail.canvas.merchantId,
        nodeId: this.currentNodeData.dialogData.id,
        currentPage: this.tableInfo.currentPage,
        showCount: this.tableInfo.showCount
      })

      if (rs.code === 200) {
        this.tableData = rs.payload
        this.tableInfo.currentPage = rs.page.currentPage
        this.tableInfo.totalResult = rs.page.totalResult
        this.tableInfo.showCount = rs.page.showCount
      }
    },

    handlePageChange(currentPage) {
      this.tableInfo.currentPage = currentPage
      this.getTableData()
    },

    handleSizeChange(showCount) {
      this.tableInfo.currentPage = 1
      this.tableInfo.showCount = showCount
      this.getTableData()
    },

    async handleExport() {
      const data = new FormData()
      data.append('nodeId', this.currentNodeData.dialogData.id)
      data.append('canvasId', this.processDetail.canvas.id)

      const rs = await CustomerApi.detailExportData(data)

      let blob = new Blob([rs], {type: "application/vnd.ms-excel"});
      let objectUrl = URL.createObjectURL(blob);
      let a = document.createElement("a");
      a.setAttribute("href", objectUrl);
      a.setAttribute("download", "数据详情.xls");
      a.click();
    }
  },
}
</script>

<style scoped lang="scss">
.main-content {
  background: #F4F6F9;

  :deep(.all-content) {
    background: unset;
    box-shadow: unset;
  }

  :deep(.all-content .white) {
    background: unset;
    padding: 0;
    box-shadow: unset;
  }

  :deep(.content-slot-bg) {
    background: unset;
    overflow: unset;
  }
}

.page-content-padding {
  padding: 14px 24px;
}

.graph-block {
  position: relative;

  .title {
    height: 64px;
    font-size: 16px;
    font-weight: bold;
    line-height: 64px;
    vertical-align: middle;
    background: white;
    padding: 0 25px;
  }
}

.info-summary {
  background: white;
  border-radius: 2px;
  margin-bottom: 14px;
  padding: 24px;

  .name {
    color: rgba(44, 49, 59, 1);
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 24px;
  }

  .property {
    font-weight: bold;
    line-height: 24px;
    font-size: 14px;
    color: rgba(170, 170, 170, 1);
    margin-bottom: 8px;
  }

  .owner {
    font-size: 14px;
    font-weight: bold;
    color: rgba(170, 170, 170, 1);
    line-height: 24px;
  }
}

:deep(.el-tabs__header) {
  margin-bottom: 0px;
}

.tab-wrapper {
  background: white;
  padding-bottom: 0;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.chart-wrapper {
  width: 100%;
  background: white;
  //height: 644px;
  margin-bottom: 14px;
}
</style>
